<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>用户管理</title>
	<meta name="decorator" content="default"/>
	<script type="text/javascript">
		$(document).ready(function() {
		    $("body").addClass("gray-bg");

			$("#btnExport").click(function(){
				top.$.jBox.confirm("确认要导出用户数据吗？","系统提示",function(v,h,f){
					if(v=="ok"){
						$("#searchForm").attr("action","${ctx}/sys/user/export");
						$("#searchForm").submit();
					}
				},{buttonsFocus:1});
				top.$('.jbox-body .jbox-icon').css('top','55px');
			});
			$("#btnImport").click(function(){
				$.jBox($("#importBox").html(), {title:"导入数据", buttons:{"关闭":true}, 
					bottomText:"导入文件不能超过5M，仅允许导入“xls”或“xlsx”格式文件！"});
			});
		});
		function page(n,s){
			if(n) $("#pageNo").val(n);
			if(s) $("#pageSize").val(s);
			$("#searchForm").attr("action","${ctx}/sys/user/list");
			$("#searchForm").submit();
	    	return false;
	    }
	</script>
</head>
<body>
<div class="wrapper wrapper-content">
	<div class="ibox">
		<div class="ibox-title">
			<h5>用户列表 </h5>
		</div>
		<div class="ibox-content">

			<div class="row">
				<div class="col-sm-12">
					<form:form id="searchForm" modelAttribute="user" action="${ctx}/sys/user/list" method="post" class="breadcrumb form-inline">
						<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
						<input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
						<sys:tableSort id="orderBy" name="orderBy" value="${page.orderBy}" callback="page();"/>

                        <div class="form-group"><span>归属公司：</span>
                            <sys:treeselect id="company" name="company.id" value="${user.company.id}" labelName="company.name" labelValue="${user.company.name}"
                                            title="公司" url="/sys/office/treeData?type=1" cssClass="input-small" allowClear="true"/>
                        </div>
                        <div class="form-group"><span>归属部门：</span>
                            <sys:treeselect id="office" name="office.id" value="${user.office.id}" labelName="office.name" labelValue="${user.office.name}"
                                            title="部门" url="/sys/office/treeData?type=2" cssClass="input-small" allowClear="true" notAllowSelectParent="true"/>
                        </div>
                        <div class="form-group"><span>姓名：</span>
                            <form:input path="name" htmlEscape="false" maxlength="50" class="input-medium"/>
                        </div>
                        <div class="form-group"><span>登录名：</span>
                            <form:input path="loginName" htmlEscape="false" maxlength="50" class="input-medium"/>
                        </div>

                        <div class="form-group">
                            <button  class="btn btn-primary btn-sm " onclick="search()" ><i class="fa fa-search"></i> 查询</button>
                            <button  class="btn btn-primary btn-sm " onclick="reset()" ><i class="fa fa-refresh"></i> 重置</button>
                        </div>

						<%--<ul class="ul-form">--%>
							<%--<li><label>归属公司：</label>--%>
                                <%--<sys:treeselect id="company" name="company.id" value="${user.company.id}" labelName="company.name" labelValue="${user.company.name}"--%>
																	<%--title="公司" url="/sys/office/treeData?type=1" cssClass="input-small" allowClear="true"/></li>--%>
							<%--<li><label>登录名：</label><form:input path="loginName" htmlEscape="false" maxlength="50" class="input-medium"/></li>--%>
							<%--<li class="clearfix"></li>--%>
							<%--<li><label>归属部门：</label><sys:treeselect id="office" name="office.id" value="${user.office.id}" labelName="office.name" labelValue="${user.office.name}"--%>
																	<%--title="部门" url="/sys/office/treeData?type=2" cssClass="input-small" allowClear="true" notAllowSelectParent="true"/></li>--%>
							<%--<li><label>姓&nbsp;&nbsp;&nbsp;名：</label><form:input path="name" htmlEscape="false" maxlength="50" class="input-medium"/></li>--%>
							<%--<li class="btns">--%>
                                <%--<input id="btnSubmit" class="btn btn-primary" type="submit" value="查询" onclick="return page();"/>--%>
							<%--</li>--%>
							<%--<li class="clearfix"></li>--%>
						<%--</ul>--%>
					</form:form>
				</div>
			</div>


			<!-- 工具栏 -->
			<div class="row">
				<div class="col-sm-12">
					<div class="pull-left">

						<button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="left" onclick="add()" title="添加"><i class="fa fa-plus"></i> 添加</button>
						<script type="text/javascript">
                            function add(){

                                if(''==null || ''==''){
                                    openDialog("新增"+'用户',"/jf/sys/user/form","1000px", "80%","officeContent");
                                }else{
                                    window.location = "/jf/sys/user/form";
                                }
                            }
						</script><!-- 增加按钮 -->



						<button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="left" onclick="edit()" title="修改"><i class="fa fa-file-text-o"></i> 修改</button>

						<script type="text/javascript">
                            $(document).ready(function() {
                                $('#contentTable thead tr th input.i-checks').on('ifChecked', function(event){ //ifCreated 事件应该在插件初始化之前绑定
                                    $('#contentTable tbody tr td input.i-checks').iCheck('check');
                                });
                                $('#contentTable thead tr th input.i-checks').on('ifUnchecked', function(event){ //ifCreated 事件应该在插件初始化之前绑定
                                    $('#contentTable tbody tr td input.i-checks').iCheck('uncheck');
                                });

                            });
                            function edit(){
                                var size = $("#contentTable tbody tr td input.i-checks:checked").size();
                                if(size == 0 ){
                                    top.layer.alert('请至少选择一条数据!', {icon: 0, title:'警告'});
                                    return;
                                }
                                if(size > 1 ){
                                    top.layer.alert('只能选择一条数据!', {icon: 0, title:'警告'});
                                    return;
                                }
                                var id =  $("#contentTable tbody tr td input.i-checks:checkbox:checked").attr("id");

                                if(''==null || ''==''){
                                    openDialog("修改"+'用户',"/jf/sys/user/form?id="+id,"1000px", "80%","officeContent");
                                }else{
                                    window.location = "/jf/sys/user/form?id="+id;
                                }
                            }
						</script><!-- 编辑按钮 -->



						<button class="btn btn-white btn-sm" onclick="deleteAll()" data-toggle="tooltip" data-placement="top"><i class="fa fa-trash-o"> 删除</i>
						</button>
						<script type="text/javascript">
                            $(document).ready(function() {
                                $('#contentTable thead tr th input.i-checks').on('ifChecked', function(event){ //ifCreated 事件应该在插件初始化之前绑定
                                    $('#contentTable tbody tr td input.i-checks').iCheck('check');
                                });
                                $('#contentTable thead tr th input.i-checks').on('ifUnchecked', function(event){ //ifCreated 事件应该在插件初始化之前绑定
                                    $('#contentTable tbody tr td input.i-checks').iCheck('uncheck');
                                });

                            });
                            function deleteAll(){
                                // var url = $(this).attr('data-url');
                                var str="";
                                var ids="";
                                $("#contentTable tbody tr td input.i-checks:checkbox").each(function(){
                                    if(true == $(this).is(':checked')){
                                        str+=$(this).attr("id")+",";
                                    }
                                });
                                if(str.substr(str.length-1)== ','){
                                    ids = str.substr(0,str.length-1);
                                }
                                if(ids == ""){
                                    top.layer.alert('请至少选择一条数据!', {icon: 0, title:'警告'});
                                    return;
                                }
                                top.layer.confirm('确认要彻底删除数据吗?', {icon: 3, title:'系统提示'}, function(index){
                                    window.location = "/jf/sys/user/deleteAll?ids="+ids;
                                    top.layer.close(index);
                                });

                            }
						</script><!-- 删除按钮 -->



						<button id="btnImport" class="btn btn-white btn-sm " data-toggle="tooltip" data-placement="left" title="导入"><i class="fa fa-folder-open-o"></i> 导入</button>
						<div id="importBox" class="hide">
							<form id="importForm" action="/jf/sys/user/import" method="post" enctype="multipart/form-data" style="padding-left:20px;text-align:center;" onsubmit="loading('正在导入，请稍等...');"><br>
								<input id="uploadFile" name="file" type="file" style="width:330px">导入文件不能超过5M，仅允许导入“xls”或“xlsx”格式文件！<br>


							</form>
						</div>
						<script type="text/javascript">
                            $(document).ready(function() {
                                $("#btnImport").click(function(){
                                    top.layer.open({
                                        type: 1,
                                        area: [500, 300],
                                        title:"导入数据",
                                        content:$("#importBox").html() ,
                                        btn: ['下载模板','确定', '关闭'],
                                        btn1: function(index, layero){
                                            window.location.href='/jf/sys/user/import/template';
                                        },
                                        btn2: function(index, layero){
                                            var inputForm =top.$("#importForm");
                                            var top_iframe = top.getActiveTab().attr("name");//获取当前active的tab的iframe
                                            inputForm.attr("target",top_iframe);//表单提交成功后，从服务器返回的url在当前tab中展示
                                            top.$("#importForm").submit();
                                            top.layer.close(index);
                                        },

                                        btn3: function(index){
                                            top.layer.close(index);
                                        }
                                    });
                                });

                            });
						</script><!-- 导入按钮 -->

						<button id="btnExport" class="btn btn-white btn-sm " data-toggle="tooltip" data-placement="left" title="导出"><i class="fa fa-file-excel-o"></i> 导出</button>
						<script type="text/javascript">
                            $(document).ready(function() {
                                $("#btnExport").click(function(){
                                    top.layer.confirm('确认要导出Excel吗?', {icon: 3, title:'系统提示'}, function(index){
                                        //do something
                                        //导出之前备份
                                        var url =  $("#searchForm").attr("action");
                                        var pageNo =  $("#pageNo").val();
                                        var pageSize = $("#pageSize").val();
                                        //导出excel
                                        $("#searchForm").attr("action","/jf/sys/user/export");
                                        $("#pageNo").val(-1);
                                        $("#pageSize").val(-1);
                                        $("#searchForm").submit();
                                        //导出excel之后还原
                                        $("#searchForm").attr("action",url);
                                        $("#pageNo").val(pageNo);
                                        $("#pageSize").val(pageSize);
                                        top.layer.close(index);
                                    });
                                });

                            });
						</script><!-- 导出按钮 -->

						<button class="btn btn-white btn-sm " data-toggle="tooltip" data-placement="left" onclick="sortOrRefresh()" title="刷新"><i class="glyphicon glyphicon-repeat"></i> 刷新</button>

					</div>
					<%--<div class="pull-right">--%>
						<%--<button class="btn btn-primary btn-rounded btn-outline btn-sm " onclick="search()"><i class="fa fa-search"></i> 查询</button>--%>
						<%--<button class="btn btn-primary btn-rounded btn-outline btn-sm " onclick="reset()"><i class="fa fa-refresh"></i> 重置</button>--%>
					<%--</div>--%>
				</div>
			</div>

			<table id="contentTable" class="table table-striped table-bordered table-condensed">
				<thead><tr><th>归属公司</th><th>归属部门</th><th class="sort-column login_name">登录名</th><th class="sort-column name">姓名</th><th>电话</th><th>手机</th><%--<th>角色</th> --%><shiro:hasPermission name="sys:user:edit"><th>操作</th></shiro:hasPermission></tr></thead>
				<tbody>
				<c:forEach items="${page.list}" var="user">
					<tr>
						<td>${user.company.name}</td>
						<td>${user.office.name}</td>
						<td>
                            <a href="#" onclick="openDialogView('查看用户信息', '${ctx}/sys/user/form?id=${user.id}','800px', '500px')">
                                ${user.loginName}
                            </a>
                        </td>
						<td>${user.name}</td>
						<td>${user.phone}</td>
						<td>${user.mobile}</td><%--
				<td>${user.roleNames}</td> --%>
						<shiro:hasPermission name="sys:user:edit"><td>
							<%--<a href="${ctx}/sys/user/form?id=${user.id}">修改</a>--%>
                            <a href="#" onclick="openDialog('修改用户信息', '${ctx}/sys/user/form?id=${user.id}','800px', '500px')" class="btn btn-success btn-xs" title="修改"><i class="fa fa-edit"></i><span class="hidden-xs">修改</span></a>
                            <%--<a href="${ctx}/sys/user/delete?id=${user.id}" onclick="return confirmx('确认要删除该用户吗？', this.href)">删除</a>--%>

                            <a href="${ctx}/sys/user/delete?id=${user.id}" onclick="return confirmx('确认要删除该用户吗？', this.href)" class="btn  btn-danger btn-xs" title="删除"><i class="fa fa-trash"></i><span class="hidden-xs">删除</span></a>


                        </td></shiro:hasPermission>
					</tr>
				</c:forEach>
				</tbody>
			</table>

			<div class="fixed-table-pagination" style="display: block;">${page}</div>

            <style>
                .fixed-table-pagination div.pagination,
                .fixed-table-pagination div.pagination-roll,
                .fixed-table-pagination .pagination-detail {
                    margin-top: 0px;
                    margin-bottom: 10px;
                }
                .fixed-table-pagination div.pagination-roll .pagination,
                .fixed-table-pagination div.pagination .pagination {
                    margin: 0;
                }
                .fixed-table-pagination .pagination a {
                    padding: 6px 12px;
                    line-height: 1.428571429;
                }
                .fixed-table-pagination .pagination-info {
                    line-height: 34px;
                    margin-right: 5px;
                }
                .fixed-table-pagination .btn-group {
                    position: relative;
                    display: inline-block;
                    vertical-align: middle;
                }
                .fixed-table-pagination .dropup .dropdown-menu {
                    margin-bottom: 0;
                }
                .fixed-table-pagination .page-list {
                    display: inline-block;
                }
            </style>
            <br>
		</div>
	</div>
</div>

	<%--<div id="importBox" class="hide">--%>
		<%--<form id="importForm" action="${ctx}/sys/user/import" method="post" enctype="multipart/form-data"--%>
			<%--class="form-search" style="padding-left:20px;text-align:center;" onsubmit="loading('正在导入，请稍等...');"><br/>--%>
			<%--<input id="uploadFile" name="file" type="file" style="width:330px"/><br/><br/>　　--%>
			<%--<input id="btnImportSubmit" class="btn btn-primary" type="submit" value="   导    入   "/>--%>
			<%--<a href="${ctx}/sys/user/import/template">下载模板</a>--%>
		<%--</form>--%>
	<%--</div>--%>
	<%--<ul class="nav nav-tabs">--%>
		<%--<li class="active"><a href="${ctx}/sys/user/list">用户列表</a></li>--%>
		<%--<shiro:hasPermission name="sys:user:edit"><li><a href="${ctx}/sys/user/form">用户添加</a></li></shiro:hasPermission>--%>
	<%--</ul>--%>

	<sys:message content="${message}"/>

</body>
</html>